<template>
  <div class="internal">
    <return-internal :title="$route.params.item"></return-internal>
    <div class="registration_information">
      <div class="visitor_information">
        <h2 class="visitor_name">{{ visitor.name }}</h2>
        <p class="visitor_id number">
          <span>身份证号</span>
          <span>{{ num }}</span>
        </p>
        <p class="Visit_card_number number">
          <span>就诊卡号</span>
          <span>{{ visitor.bdcard }}</span>
        </p>
        <span class="switch_visitor" @click.stop="switchAction()">切换就诊人</span>
      </div>
      <div class="screen">
        <span>近3个月</span>
        <img
          src="https://cdn7.axureshop.com/demo/1763441/images/%E8%87%AA%E5%8A%A9%E7%BC%B4%E8%B4%B9%EF%BC%88%E5%B7%B2%E6%94%AF%E4%BB%98%EF%BC%89/u1652.svg"
          alt="" />
      </div>
      <div class="order_list" v-for="item in list" :key="item._id" @click.stop="detailsAction(item._id)">
        <p>
          <span>就诊科室：{{ item.department }}</span>
          <span class="state" v-if="item.state == 1">待支付</span>
          <span class="state" v-else-if="item.state == 2">待取号</span>
          <span class="state_1" v-else-if="item.state == 3">已取号</span>
          <span class="state_1" v-else-if="item.state == 4">已取消</span>
          <span class="state_1" v-else-if="item.state == 5">已退号</span>
        </p>
        <p>
          <span>就诊医生：{{ item.doctor }}</span>
        </p>
        <p>
          <span>就诊日期：{{ item.date }}</span>
          <span class="price">{{ item.price }}</span>
        </p>
        <p>
          <span>就诊序号：{{ item.number }}</span>
        </p>
        <p v-if="item.state == 1">
          <button class="btn_1" @click.stop="payAction(item._id)">立即支付</button>
          <button class="btn" @click.stop="cancellationAction(item._id, item.state)">
            取消预约
          </button>
        </p>
        <p v-else-if="item.state == 2">
          <button class="btn_1" @click.stop="retrievalAction(item._id, item.state)">
            取号
          </button>
          <button class="btn" @click.stop="refundAction(item._id, item.state)">
            退号
          </button>
        </p>
        <p v-else-if="item.state == 3">
          <button class="btn" @click.stop="deleteAction(item._id)">删除订单</button>
        </p>
        <p v-else-if="item.state == 4">
          <button class="btn" @click.stop="deleteAction(item._id)">删除订单</button>
        </p>
        <p v-else-if="item.state == 5">
          <button class="btn" @click.stop="deleteAction(item._id)">删除订单</button>
        </p>
      </div>
    </div>
    <van-overlay :show="show" @click.stop="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <!-- 密码输入框 -->
          <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true"
            :error-info="errorInfo" />
          <!-- 数字键盘 -->
          <van-number-keyboard v-model="value" :show="true" @blur="showKeyboard = false" />
          <!-- <van-button round type="info">圆形按钮</van-button> -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getRegister,
  patchRegister,
  deleteRegister,
} from "../../../api/register";
import { Overlay, PasswordInput, NumberKeyboard, Button, Toast, Dialog } from 'vant'
import axios from 'axios';
export default {
  components: {
    [Overlay.name]: Overlay,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      list: [],
      show: false,
      value: '',
      showKeyboard: false,
      errorInfo: '',
      itemid: ''
    };
  },
  watch: {
    $route() {
      this.registerData();
    },
  },
  computed: {
    ...mapState("doctor", ["visitor"]),
    num() {
      let aa = this.visitor.idcard;
      console.log(aa);
      if (aa) {
        let cc = aa.replace(aa.substring(6, 14), "********");
        return cc;
      }
      return
    },
    aa() { },
  },

  methods: {
    // 切换就诊人
    switchAction() {
      this.$router.push({
        name: "SelectVisitor",
        params: { text: "选择就诊人" },
      });
    },
    //付钱
    async payAction(id) {
      this.show = true;
      this.itemid = id;
      if (this.value == '123456') {
        let res = await axios.request({
          method: "patch",
          url: "/api/registeredOrder",
          data: { _id: id, state: 2 },
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });
        console.log('sdaafafsfsasf', res)
        this.$router.replace({
          name: "PaymentResults",
          params: { text: "支付结果", id: this.itemid },
        });
      }
    },
    // 渲染订单
    async registerData() {
      const { data } = await getRegister({
        patientID: this.visitor._id,
      });
      this.list = data.datas.sort(function (a, b) {
        return a.state - b.state;
      });
      console.log("---订单list---", this.list);
    },
    // 取消订单
    cancellationAction(id, state) {
      Dialog.confirm({
        title: "",
        message: "确定取消预约吗？",
      })
        .then(async () => {
          console.log(id, state);
          const { data } = await patchRegister({
            _id: id,
            state: 4,
          });
          console.log("---取消订单---", data);
          this.registerData();
        })
        .catch(() => { });
    },
    // 取号
    async retrievalAction(id, state) {
      console.log(id, state);
      const { data } = await patchRegister({
        _id: id,
        state: 3,
      });
      if (data) {
        Toast("取号成功");
      }
      console.log("---取号---", data);
      this.registerData();
    },
    // 退号
    refundAction(id, state) {
      Dialog.confirm({
        title: "",
        message: "确定要退号吗？",
      })
        .then(async () => {
          console.log(id, state);
          const { data } = await patchRegister({
            _id: id,
            state: 5,
          });
          console.log("---退号---", data);
          this.registerData();
        })
        .catch(() => { });
    },
    // 删除订单
    deleteAction(id) {
      Dialog.confirm({
        title: "",
        message: "确定要删除订单吗？",
      })
        .then(async () => {
          const { data } = await deleteRegister({ _id: id });
          console.log("---删除订单---", data);
          this.registerData();
        })
        .catch(() => { });
    },
    // 跳转详情
    detailsAction(id) {
      console.log("---挂号订单id---", id);
      this.$router.push({
        name: "RegistrationDetails",
        params: { text: "订单详情", id },
      });
    },
  },
  created() {
    console.log("---就诊人---", this.visitor);
  },
  mounted() {
    this.registerData();
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== '123456') {
        Toast('密码错误')
      } else if (value.length === 6 && value == '123456') {
        Toast('密码正确')
        this.payAction(this.itemid)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.registration_information {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .visitor_information {
    margin: 0 auto;
    margin-top: vw(15);
    background-color: #fff;
    position: relative;
    width: vw(340);
    height: vw(133);
    border-radius: vw(5);
    padding-left: vw(30);
    box-sizing: border-box;
    font-size: vw(14);

    .visitor_name {
      font-family: "Arial-BoldMT", "Arial Bold", "Arial";
      font-weight: 700;
      font-style: normal;
      padding-bottom: vw(15);
      padding-top: vw(20);
      color: #000000;
    }

    .number {
      padding-bottom: vw(20);
      color: #999;

      span {
        padding-right: vw(20);
      }
    }

    .switch_visitor {
      position: absolute;
      background-color: #2ec7c9;
      color: #fff;
      padding: vw(5) vw(3);
      right: vw(10);
      top: vw(60);
      border-radius: vw(3);
      font-size: vw(13);
    }
  }

  .screen {
    padding-left: vw(25);
    margin-top: vw(10);
    margin-bottom: vw(10);
    display: flex;
    align-items: center;

    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(13);
      color: #333;
    }

    img {
      width: vw(20);
      height: vw(20);
    }
  }

  // 订单列表
  .order_list {
    width: vw(340);
    height: vw(200);
    margin: 0 auto;
    background-color: #fff;
    padding-left: vw(18);
    padding-top: vw(20);
    padding-right: vw(15);
    margin-bottom: vw(10);
    box-sizing: border-box;

    p {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #333;
      margin-bottom: vw(15);

      .state,
      .price {
        float: right;
        padding-right: vw(15);
        box-sizing: border-box;
        color: #ec5c28;
      }

      .state_1 {
        float: right;
        padding-right: vw(15);
        box-sizing: border-box;
        color: #999;
      }

      button {
        width: vw(84);
        height: vw(31);
        float: right;
        margin-top: vw(20);
        margin-left: vw(10);
        border-radius: vw(5);
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(13);
        border: none;
      }

      .btn {
        border: vw(1) solid #2ec7c9;
        color: #2ec7c9;
        background-color: transparent;
      }

      .btn_1 {
        background-color: #2ec7c9;
        color: #fff;
      }
    }
  }
}

ul {
  position: fixed;
  bottom: vw(260);
  left: 50%;
  transform: translateX(-50%);
}
</style>
